<!DOCTYPE html>
<html>

	<head>
		<title>adress</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../lib/weui.min.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/adress.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
		<style type="text/css">
			.center a:hover{
				color: #04BE02;
			}
			.colora{
				color: greenyellow;
			}
			.colorb{
				color: greenyellow;
			}
		</style>
	</head>

	<body ontouchstart>
		<div>
			<div class="head">
				&nbsp;<span id="return" class="iconfont icon-back" @click="return1"></span> 新增地址
			</div>
			<div class="content">
				<div class="weui-cells weui-cells_form">
					<div class="weui-cell">
						<div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" placeholder="姓名" v-on:blur="yzname(name)" v-model="name">
						</div>
					</div>
					<div class="center">
						<a href="javascript:;" class="weui-btn weui-btn_default wu_inp" name="radio" :class="{colora:isgreen}" @click="showcolor">先生</a>
						<a href="javascript:;" class="weui-btn weui-btn_default wu_inp" name="radio" :class="{colorb:isgreen1}" @click="showcolor1">女士</a>
					</div>
					<div class="weui-cell weui-cell_vcode">
						<div class="weui-cell__hd">
							<label class="weui-label">电话</label>
						</div>
						<div class="weui-cell__bd">
							<input class="weui-input" type="tel" placeholder="请输入手机号" v-model="phone" v-on:blur="yzphone(phone)">
						</div>
						<div class="weui-cell__ft">
							<button class="weui-vcode-btn">+通讯录</button>
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd"><label class="weui-label">地址</label></div>
						<div class="weui-cell__bd">
							<input class="weui-input" id='city-picker' type="text" placeholder="省/市/区等" >
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" placeholder="详细地址">
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd"><label class="weui-label">门牌号</label></div>
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" placeholder="例：5号楼203室">
						</div>
					</div>
					<div class="weui-cell">
						<div class="weui-cell__hd"><label class="weui-label">标签</label></div>
						<div class="weui-cell__bd wu_min">
							<a href="javascript:;" class="weui-btn weui-btn_default wu_inp" name="radio">家</a>
							<a href="javascript:;" class="weui-btn weui-btn_default wu_inp" name="radio">公司</a>
							<a href="javascript:;" class="weui-btn weui-btn_default wu_inp" name="radio">学校</a>
						</div>
					</div>
				</div>
				<a href="javascript:;" class="weui-btn weui-btn_primary" v-on:click="issure">确定</a>
			</div>
		</div>
		<script src="../lib/jquery-2.1.4.js"></script>
		<script src="../js/jquery-weui.min.js"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/city-picker.js" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript"></script>
		<script>
			var vue = new Vue({
				el:"body",
				data:{
					name:"",
					phone:"",
					isgreen:false,
				},
				methods:{
					yzname:function  () {
			             var reg = /^([\u4e00-\u9fa5]){2,4}$/    //验证姓名的正则表达式
						if (reg.test(this.name)) {
							alert("输入的姓名正确")
						} else{
							alert("输入的姓名不正确");
						}
					},
					yzphone:function  () {
						var reg1 = /^[1][34578]\d{9}$/;
						if (reg1.test(this.phone)) {
							alert("手机号码正确");
						} else{
						alert("手机号码不正确");
						}
					},
					return1:function(){
						history.go(-1);
					},
					showcolor:function(){
						this.isgreen = true;
						this.isgreen1 = false;
						
					},
					showcolor1:function(){
						this.isgreen1 = true;
						this.isgreen = false;
					},
					issure:function(){
						history.go(-1);
						console.log($("#city-picker").val());
						var ss = $("#city-picker").val();
						var dd =  1;
						window.localStorage.setItem(dd,ss);
					},
				},
			});
           //这是引用的插件   收货地址的省级联动
			$("#city-picker").cityPicker({
				title: "请选择收货地址"
			});
		</script>
	</body>

</html>